<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	template="../templates/noLeftPanelTemplate.xhtml">
	<!-- REF TO UI TEMPLATE -->

	<ui:define name="content">

			
		<p:growl id="growl" life="1000" showDetail="true" >
			
		</p:growl>
		<!-- Products -->
		<div class="cart-summary" style="position: relative">

			<h1>CART OVERVIEW</h1>
			<div id="separator"
				style="border-bottom: 1px solid; width: auto; margin-top: 20px" />



			<h:panelGrid id="cartElementList">





				<h:form id="cartForm">

					<h:panelGrid id="emptyCartSection"
						rendered="#{(shop.cart.totalCount) == 0}">
						Non ci sono articoli da acquistare. 
						
						<h:commandLink action="#{shop.continueShopping}" >
							Continua lo shopping.
						
						</h:commandLink>
						<!-- 
						<a href="#{request.contextPath}/main/searchResult.jsf" >
							
						</a>
						-->					
						<img src="#{request.contextPath}/css/images/shopping-bag-icon.jpg" alt=""
													width="200" height="200" />
					</h:panelGrid>
					
					<h:panelGrid id="loopSection"
						rendered="#{(shop.cart.totalCount) > 0}">
						<ui:repeat var="item" value="${shop.listOfItemInsideCart}"
							varStatus="index">

							<h:panelGrid columns="1">
								<h:panelGroup>
									<h:panelGrid columns="4">
										<h:panelGroup>
											<h:commandLink action="#{shop.showItemDetail}">
												<img src="#{request.contextPath}/#{item.detailImage}" alt=""
													width="100" height="150" />
												<f:param name="lastVisisteditem" value="item" />
											</h:commandLink>
										</h:panelGroup>
										<h:panelGroup>
											<h3>#{item.name}</h3>
										</h:panelGroup>
										<h:panelGroup>
											<h3>#{item.description}</h3>
										</h:panelGroup>
										<h:panelGroup>
											<strong class="price">#{item.price} <span>€</span>
											</strong>
										</h:panelGroup>
									</h:panelGrid>
								</h:panelGroup>

								<h:panelGroup>
									<h:panelGrid columns="4">
										<h:panelGroup>
											<p:commandButton id="removeFromCart" value="REMOVE FROM CART"
												update=":cartDiv, :cartForm, :growl">
												<!-- Update panel with cart info -->
												<f:setPropertyActionListener target="#{shop.itemToRemove}"
													value="${item}" />
											</p:commandButton>
										</h:panelGroup>
										<h:panelGroup>
											<h3>Quantity: #{shop.cart.items[item]}</h3>
										</h:panelGroup>
										<h:panelGroup>
											<p:commandButton id="incrementButton" value="+"
												action="#{shop.incrementQuantity}"
												update=":cartDiv, :cartForm, :growl">
												<!-- Update panel with cart info -->
												<f:setPropertyActionListener target="#{shop.selectedItem}"
													value="${item}" />
											</p:commandButton>
										</h:panelGroup>
										<h:panelGroup>

											<p:commandButton id="decrementButton" value="-"
												action="#{shop.decrementQuantity}"
												update=":cartDiv, :cartForm, :growl">
												<!-- Update panel with cart info -->
												<f:setPropertyActionListener target="#{shop.selectedItem}"
													value="${item}" />
											</p:commandButton>

										</h:panelGroup>


									</h:panelGrid>
								</h:panelGroup>


							</h:panelGrid>


							<div id="separator" style="border-bottom: 1px solid; width: auto" />

						</ui:repeat>
					</h:panelGrid>
				</h:form>
			</h:panelGrid>
		</div>

	</ui:define>
</ui:composition>
<!-- Content -->
